<template>
  <div class="infinite-list-wrapper" style="overflow:auto">
    <div class="block"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled" >
      <el-timeline v-for="info in data" :key="i">
        <el-timeline-item :timestamp="info.date" placement="top">
          <el-card>
            <h4>{{infoType[info.type]}}</h4>
            <p style="white-space: pre-line">{{info.message}}</p>
            <p>{{info.author}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      loading: false,
      totalPages: "",
      data: [],
      infoType: ["通知","警告","提醒"]
    };
  },
  computed: {
    noMore() {
      return this.current >= this.totalPages;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getData();
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.current += 1;
        this.getData();
      }, 2000);
    },
    //获取数据
    getData(){
      this.$http.get("/api_updateinfo/updateinfo/page?serviceName=cloudstorage&current="+this.current+"&size=5").then(res=>{
        console.log(res);
        this.data = this.data.concat(res.data.data.list);
        this.totalPages = res.data.data.totalPages;
        this.loading = false;}).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>